<template>
    <div style="border: 2px dotted lightblue;width: 800px; height: 500px;margin: 0 auto;">
        <div style="margin-top: 250px;">
            <el-upload class="upload-demo" ref="upload" action="http://localhost:3000/upload" :headers='header'
                :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false"
                list-type="picture" multiple :before-remove="beforeRemove" :http-request="httpRequest" :on-exceed="handleExceed" 
                :on-success="
                    (response, file, fileList) => {
                        return handleSuccess(response, file, fileList);
                    }">
                <div slot="file" slot-scope="{file}">
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" @click="show(file)">
                    <span>name:{{ file.name }}</span>
                    <span style="margin-left: 100px;">size:{{ file.size }}</span>
                </div>

                <el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                    <img :src="dialogImageUrl" alt="" width="100%">
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
                <el-button slot="trigger" size="small" type="primary">选择照片</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">提交</el-button>
                <el-pagination small layout="prev, pager, next" :total="50">
                </el-pagination>
            </el-upload>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            fileList: [],
            dialogVisible: false,
            disabled: false,
            token: "",
            dialogImageUrl: '',
            header: { 'authorization': localStorage["token"] },
            total: ''
        };
    },
    computed: {
        headers() {
            return {
                'Authorization': "Bearer " + this.token
            }
        },
    },
    methods: {
        submitUpload() {
            this.$refs.upload.submit();
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleSuccess(response, file, fileList) {
            console.log(response, file, fileList);

        },
        httpRequest(params) {
            console.log(params)//拿到上传的文件
            fetch("http://localhost:3000/upload", {
                headers: { Author: localStorage["token"] }
            }).then(res => res.json())
                .then(res => {
                    if (res.token) {
                        alert('文件上传成功')
                    } else {
                        talert('文件上传失败')
                    }

                })
            fetch("http://localhost:3000/verify", {
                method: "POST",
                body: JSON.stringify({
                    name: params.file.name,
                    id: params.file.uid
                })
            }).then(res => res.json())
                .then(res => {
                    console.log(res);
                })
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        show(file) {
            this.dialogVisible = true;
            this.dialogImageUrl = file.url;
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3000 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        getpage() {
            fetch("http://localhost:3000/getpage")
                .then(res => res.json())
                .then(res => {
                    console.log(res.length);
                    this.total = res.length;
                })
        }
    },
    mounted() {
        this.getpage();
    }
}
</script>